<template>
    <!-- component/calculators/index.wxml -->
    <!-- component/calculator/calculator.wxml -->
    <view class="btn_pay" @tap.stop.prevent="hindKeyboard">
        <view class="title">
            <text>金额：</text>
        </view>
        <view class="input_box" @tap.stop.prevent="showKeyboard">
            <text class="input_label" v-if="!Show">￥</text>
            <view class="content" v-if="content.length">
                <view :data-str-index="index + 1" @tap.stop.prevent="getStrPosition" v-for="(item, index) in content" :key="index">
                    <view class="number-block">
                        {{ item }}
                        <!-- 光标 -->
                        <view class="cursor cursor-insert" v-if="cursorIndex === index + 1"></view>
                    </view>
                </view>
            </view>
            <view :class="'cursor ' + (isShow ? 'actives' : '')" v-if="!cursorIndex"></view>
            <view class="default-content" v-if="!content.length">{{ defaultContent }}</view>
        </view>
        <view class="width-com"></view>
        <view class="compon">
            <view :class="'keyboard ' + (keyShow && 'hind_box')">
                <view class="key-text">商户自定义输入金额</view>
                <view class="key-box">
                    <view class="number-box clearfix">
                        <view
                            :data-keys="item"
                            :class="'key ' + (index === 9 ? 'key-zero' : '')"
                            hover-class="number-box-hover"
                            @tap.stop.prevent="keyTap"
                            v-for="(item, index) in KeyboardKeys"
                            :key="index"
                        >
                            {{ item }}
                        </view>
                    </view>
                    <view class="btn-box">
                        <!-- 需要替换成删除icon -->
                        <view class="key" hover-class="number-box-hover" data-keys="<" @tap.stop.prevent="keyTap">X</view>
                        <view :class="'key pay_btn ' + (payMoney ? '' : 'pay-btn-display')" hover-class="pay-btn-hover" @tap.stop.prevent="handlePay">确认支付</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// component/calculator/index.js
export default {
    data() {
        return {
            content: [],
            // 输入的金额
            payMoney: '',
            // 支付金额
            defaultContent: '请输入金额',
            // 默认内容
            KeyboardKeys: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', ''],
            keyShow: false,
            // 是否展示键盘
            cursorIndex: '',
            // 插入光标位置
            isShow: true,
            Show: true
        };
    },
    externalClasses: ['input_label', 'number-block'],
    /**
     * 组件的属性列表
     */
    props: {},
    /**
     * 组件的方法列表
     */
    methods: {
        //点击界面键盘消失
        hindKeyboard() {
            this.setData({
                keyShow: false
            });
        },

        //点击输入框，键盘显示
        showKeyboard() {
            this.setData({
                keyShow: !this.keyShow,
                isShow: !this.isShow,
                Show: !this.Show
            });
        },

        // 获取插入光标位置
        getStrPosition(e) {
            let { strIndex } = e.currentTarget.dataset;
            this.setData({
                cursorIndex: strIndex
            });
        },

        keyTap(e) {
            let { keys } = e.currentTarget.dataset;
            let content = this.content.join('');
            let // 转为字符串
                strLen = content.length;
            let { cursorIndex } = this;
            switch (keys) {
                case '.':
                    if (content.indexOf('.') === -1) {
                        // 已有一个点的情况下
                        if (content.length < 1) {
                            content = '0.';
                        } else {
                            content += '.';
                        }
                    }

                    break;

                case '<':
                    if (cursorIndex > 0 && cursorIndex !== strLen) {
                        // 从插入光标开始删除元素
                        this.content.splice(cursorIndex - 1, 1);
                        content = this.content.join('');
                    } else {
                        content = content.substr(0, content.length - 1);
                    }

                    if (!strLen || cursorIndex === strLen) {
                        // 插入光标位置重置
                        this.setData({
                            cursorIndex: ''
                        });
                    } // 删除点 组件中可以用Observer监听删除点和删除0的情况

                    if (content[0] === '0' && content[1] !== '.') {
                        content = content.substr(1, content.length - 1);
                    }

                    if (content[0] === '.') {
                        content = '0' + content;
                    }

                    break;

                default: //小数点的位置
                    let spotIndex = content.indexOf('.');

                    if (content[0] === '0' && content[1] !== '.') {
                        content = content.substr(1, content.length - 1);
                    }

                    if (spotIndex === -1 || strLen - spotIndex !== 3) {
                        //小数点后只保留两位
                        content += keys;
                    }

                    break;
            }

            this.setData({
                content: content.split(''),
                // 转为数组
                payMoney: content // 支付金额
            });
        },

        handlePay() {
            const { payMoney } = this;

            if (payMoney === '') {
                return;
            }

            if (payMoney < '0.01') {
                uni.showToast({
                    title: '支付金额不能小于0.01',
                    icon: 'none',
                    duration: 1500
                });
                return;
            }

            console.log(Number(payMoney), '付款');
        },

        goToCard() {
            uni.navigateTo({
                url: '/pagesc/cardsale/index?type=3'
            });
        },

        goToOrdercashier() {
            uni.navigateTo({
                url: '/pagesc/ordercashier/ordercashier'
            });
        }
    }
};
</script>
<style>
/* component/calculator/index.wxss */
/* component/calculators/index.wxss */
/* component/calculator/calculator.wxss */
.btn_pay {
    width: 750rpx;
    height: 950rpx;
    background: #ffffff;
    border-bottom: 2rpx solid #e5e5e5;
}

.title {
    padding: 30rpx 40rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.page_box {
    width: 100%;
    height: 100%;
    background: #f3f7f7;
    overflow: hidden;
}

.input_view {
    width: 700rpx;
    height: 500rpx;
    background: #fff;
    margin: 25rpx auto;
    border-radius: 10rpx;
    padding: 40rpx;
    box-sizing: border-box;
}
.key-text {
    display: flex;
    justify-content: center;
    font-size: 24rpx;
    color: #999999;
    background: #fff;
    padding-bottom: 20rpx;
}

.input_box {
    display: flex;
    align-items: center;
    padding-top: 0rpx;
    height: 90rpx;
    margin-left: 40rpx;
    margin-top: -20rpx;
}

.input_label {
    font-size: 24rpx;
    margin-right: 5rpx;
}

.content {
    display: flex;
}

.number-block {
    position: relative;
}

/* 光标 */
.cursor-insert {
    position: absolute;
    top: 0rpx;
    right: -1rpx;
}

.cursor {
    width: 2rpx;
    height: 70rpx;
    top: 0rpx;
    background: #666;
    border-radius: 6rpx;
    animation: twinkling 0.9s infinite;
}
.width-com {
    height: 0;
    width: 670rpx;
    margin-left: 40rpx;
    margin-right: 40rpx;
    border-bottom: 2rpx solid #e5e5e5;
    padding-top: 5rpx;
}

.default-content {
    color: #999;
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
}
.compon {
    position: relative;
}

.keyboard {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    height: 0;
    background: #f7f7f7;
    transition: height 0.3s;
}

.hind_box {
    height: 544rpx;
}

.key-box {
    display: flex;
    padding-left: 16rpx;
    padding-bottom: 16rpx;
    padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
}

.number-box {
    flex: 3;
}

.number-box .key {
    float: left;
    margin: 16rpx 16rpx 0 0;
    width: calc(100% / 3 - 16rpx);
    height: 90rpx;
    border-radius: 10rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 40rpx;
    font-weight: bold;
    background-color: #fff;
}

.number-box .key.key-zero {
    width: calc((100% / 3) * 2 - 16rpx);
}

.btn-box {
    flex: 1;
}

.btn-box .key {
    margin: 16rpx 16rpx 0 0;
    height: 90rpx;
    border-radius: 10rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 40rpx;
    font-weight: bold;
    background-color: #fff;
}

.btn-box .pay_btn {
    height: 298rpx;
    line-height: 298rpx;
    font-weight: normal;
    background-color: #e94a18;
    color: #fff;
    font-size: 32rpx;
}

/* .btn-box .pay_btn.pay-btn-display {
  background-color: #E94A18 !important;
} */

/* .btn-box .pay_btn.pay-btn-hover {
  background-color: #179B16;
} */
.actives {
    display: none;
}
</style>
